<template>
  <div class="app-container">
    <div class="container">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item style="margin-bottom: 10px; margin-left: 15px">
          <el-input
            v-model="queryForm.keywords"
            prefix-icon="el-icon-search"
            placeholder="场景名称"
            style="width: 20rem"
            @input="onQuerySubmit"
          />
        </el-form-item>
      </el-form>

      <div class="sence-container">
        <SceneCard
          v-for="item in tableData"
          :key="item.id"
          :sence-info="item"
          @click.native="previewFun(item.id)"
        />
      </div>

      <!--预览-->
      <preview-drawer
        v-if="previewDrawer.visible"
        :properties="previewDrawer"
        @closed="close"
        @refresh="load"
      />
    </div>
  </div>
</template>

<script>
import PreviewDrawer from './components/PreviewDrawer.vue'
import SceneCard from './components/SceneCard.vue'

import { hasPermission } from '@/utils/permission'
import {
  findSceneList,
  deleteScene,
  getThumbnail,
  getSceneTypes,
  findSceneMarketList
} from '@/api/biz/scene'
import { previewProject } from '@/api/biz/project'
import { isOk } from '@/utils/request'
export default {
  name: 'Scene',
  components: {
    PreviewDrawer,
    SceneCard
  },
  data() {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      queryForm: {
        keywords: undefined
      },
      page: {
        cur: 1,
        limit: 50,
        total: 0
      },
      tableData: [],
      previewDrawer: {
        visible: false,
        type: '0',
        data: {}
      },
      maskShow: false,
      infoDialogShow: false,
      handlerDialogShow: false,
      position: {
        x: 0,
        y: 0
      },
      mode: ''
    }
  },
  created() {
    this.load()
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    onQuerySubmit(event) {
      this.load()
    },
    onReset(event) {
      this.queryForm.keywords = undefined
      this.load()
    },
    load() {
      this.loading = true
      findSceneMarketList({
        keywords: this.queryForm.keywords
      })
        .then((rsp) => {
          if (isOk(rsp)) {
            const _data = rsp.result
            _data.forEach((item) => {
              item['url'] = this.baseUrl + '/biz/scene/thumbnail/' + item.sceneId
            })
            this.tableData = _data
            this.loading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePreview: function(data) {
      this.previewDrawer.visible = true
      this.previewDrawer.type = '1'
      this.previewDrawer.data = data
    },
    close: function(e) {
      this.previewDrawer.visible = false
      this.previewDrawer.data = {}
      this.load()
    },
    previewFun: function(id) {
      previewProject({
        projectId: id
      })
        .then((rsp) => {
          if (isOk(rsp)) {
            const _data = rsp.result
            const info = {
              url: _data.url,
              id: _data.project.id,
              sceneId: _data.project.sceneId,
              resX: _data.scene.resX,
              resY: _data.scene.resY,
              handler: 'preview332530'
            }
            this.$store.commit('scene/setIframeShow', true)
            this.$store.commit('scene/setSceneInfo', info)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 130px);
  position: relative;
  .container {
    position: absolute;
    z-index: 1;
    .sence-container {
      height: calc(100vh - 130px);
      padding-bottom: 80px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      overflow: auto !important;
    }
  }
}
</style>
